{% extends 'main/bazo.html' %}
{% load i18n %}
{% load static %}
{% block css_js %}
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.0.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="{% static 'main/style/bootstrap-datetimepicker.min.css' %}">
    <script type="text/javascript" src="{% static 'main/script/moment-with-locales.min.js' %}"></script>
    <script type="text/javascript" src="{% static 'main/script/bootstrap-datetimepicker.js' %}"></script>
    <script type="text/javascript" src="{% static 'statistiko/script/statistiko.js' %}"></script>
{% endblock css_js %}
{% block title %}
    {% trans 'Стастистика активности' %}
{% endblock %}
{% block main_side %}
    <div class="card">
        <div class="card-header">
            <h5>{% trans 'Период сбора статистики' %}</h5>
        </div>
        <div class="card-body">
            <div class="row">
                <div class="col-sm-4">
                    <div class='input-group'>
                        <input id='komenco' type="text" placeholder="{% trans 'Начало периода' %}">
                        <div class="input-group-append">
                            <span class="input-group-text fa fa-calendar"></span>
                        </div>
                    </div>
                </div>
                <div class="col-sm-4">
                    <div class='input-group date'>
                        <input id='fino' type="text" placeholder="{% trans 'Конец периода' %}">
                        <div class="input-group-append">
                            <span class="input-group-text fa fa-calendar"></span>
                        </div>
                    </div>
                </div>
                <div class="col-sm-4 text-right">
                    <div class="btn-group">
                        <button id="accept" class="btn btn-success">{% trans 'Применить' %}</button>
                        <button id="reset" class="btn btn-primary">{% trans 'Сбросить' %}</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="card" id="statistiko" style="margin-top: 10px;">
        <div class="card-header">
            <h5>{% trans 'Статистика' %}</h5>
        </div>
        <div class="card-body">
            <table class="table table-striped text-center">
                <thead>
                    <tr>
                        <th>{% trans 'Активность' %}</th>
                        <th>{% trans 'Всего' %}</th>
                        <th>{% trans 'Прирост' %}</th>
                        <th>{% trans 'Процент прироста' %}</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>{% trans 'Пользователи' %}</td>
                        <td><span id="uzantoj_tuta"></span></td>
                        <td><span id="uzantoj_gajno"></span></td>
                        <td><span id="uzantoj_procento"></span></td>
                    </tr>
                    <tr>
                        <td>{% trans 'Сообщества' %}</td>
                        <td><span id="komunumoj_tuta"></span></td>
                        <td><span id="komunumoj_gajno"></span></td>
                        <td><span id="komunumoj_procento"></span></td>
                    </tr>
                    <tr>
                        <td>{% trans 'Публикации' %}</td>
                        <td><span id="enskriboj_tuta"></span></td>
                        <td><span id="enskriboj_gajno"></span></td>
                        <td><span id="enskriboj_procento"></span></td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
{% endblock %}
